<template>
    <div class="headtop" style="    position: fixed;
    top: 0;" @mouseleave="leave();leaveone()">
        <div class="Login_logo" style="  width: 170px;
  height: 45px;">
            <img src="../assets/images/headtop/logo.png" />
            <span class="logoName">五粮液专卖店云店管理平台</span>
        </div>

        <div class="erjimenu">
            <span
                v-for="(item,i) in twomenulist"
                :key="i"
                @mouseover="changeTabtwo(item.moduleName)"
                :class="{'erclass':clicked==item.moduleName}"
                @click="sanmenu(item.moduleId)"
            >{{item.moduleName}}</span>
        </div>
        <!--
    <div class="zuji" @click="gozuji()">
      <span>
        <span>
          <img src="../assets/images/zuji/daohangImg.png" style="float:left" />
        </span>
        <span class="myzuji">我的足迹</span>
      </span>
    </div>
        -->
        <div class="sifang" @mouseenter="enter()">
            <!-- <span>
        <span>
          <img src="../assets/images/headtop/head_02.png" />
        </span>
        <span class="arrow"></span>
            </span>-->
            <div class="yijiselect" v-if="flag" @click="yijiselect()" @mouseleave="leave()">
                <span
                    v-for="(item,i) in onemenulist"
                    :key="i"
                    @click="gettwoid(item.appId);changeTab(i)"
                    @mouseover="changeTabone(item.appName)"
                    :class="{'bor':clicked==item.appName}"
                >{{item.appName}}</span>
            </div>
        </div>
        <div v-if="['2', '4', '5', '6'].includes(userInfo.userType)" class="operation-wrapper">
          <el-button type="primary" icon="el-icon-document-checked" @click="operation()" size="mini">操作手册下载</el-button>
        </div>
        <div class="sifangone">
            <div class="quitimg" @mouseenter="enterone()">
                <span>
                    <img
                        src="../assets/images/login/admin.png"
                        style="width:17px;height:17px"
                        @click="quitone()"
                    />
                </span>
                <span class="name">
                    <!-- <img src="../assets/images/headtop/head_03.png" /> -->
                    {{nameone}}
                </span>

                <span class="arrowone"></span>
                <span>
                    <img src="../assets/images/login/shezhi-10.png" style="width:17px;height:17px" />
                </span>
            </div>

            <div class="yijiselectone" v-if="flag1" @click="clickquit()" @mouseleave="leaveone()">
                <span
                    v-for="(item,i) in imglist"
                    :key="i"
                    @click="quit(item.imgtext)"
                    @mouseover="changeTabone(item.imgtext)"
                    :class="{'bor':clicked==item.imgtext}"
                >{{item.imgtext}}</span>

                <!-- <span @click="quit()">退出</span> -->
            </div>
        </div>
    </div>
</template>

<script>
import { onemenu, twomenu } from "@/api/headtop";
import { logininfo } from "@/api/loginApi";
import Bus from "@/utils/bus";
import qs from "qs";
export default {
  name: "headTop",
  data() {
    return {
      flag: false,
      flag1: false,
      moduleId: "",
      clicked: "",
      tenantId: "",
      onemenulist: [],
      twomenulist: [],
      corpLogoIn: "",
      corpLogoInchu: require("../assets/images/headtop/head_01.png"),
      imglist: [
        // {
        //   imgtext: "基本资料"
        // },
        {
          imgtext: "修改密码"
        },
        {
          imgtext: "退出"
        }
      ],
      elementValue: "",
      elementValueone: "",
      sanji: "",
      name: {},
      nameone: "",
      logininfo: {},
      userInfo: {}
    };
  },
  mounted() {
    // this.onemenu();
    sessionStorage.setItem("tenantId", this.$route.params.tenantId);
    // this.getlogininfo();
    this.sanmenu();
    this.name = localStorage.getItem("logininfo");
    this.userInfo = JSON.parse(this.name);
    this.nameone = JSON.parse(this.name).realName;
  },
  methods: {
    // getlogininfo() {
    //   this.tenantId = sessionStorage.getItem("tenantId");
    //   let data = { tenantCode: this.tenantId };
    //   logininfo(qs.stringify(data)).then(res => {
    //     //    console.log(res, "pp");
    //     res.result.corpLogoIn
    //       ? (this.corpLogoIn = res.result.corpLogoIn)
    //       : (this.corpLogoIn = this.corpLogoInchu);
    //   });
    // },
    changeTab(index) {
      this.clicked = index;
    },
    quitone() {
      this.$router.push("login");
      sessionStorage.removeItem("loginstatus");
    },
    changeTabone(index) {
      this.clicked = index;
    },
    changeTabtwo(index) {
      this.clicked = index;
    },
    gozuji() {
      this.$router.push("foodList");
      //   window.location.href =
      //     "http://10.51.4.60:8989/static/mainPage/mainIndex.jsp";
    },
    onemenu() {
      //var ul = "u1";
      var userId = localStorage.getItem("userId");
      onemenu({
        userId: userId
      }).then(res => {
        this.onemenulist = res.records;
        this.$nextTick(() => {
          this.gettwoid(this.onemenulist[0].appId);
        });
      });
    },
    gettwoid(v) {
      // var ul = "u1";

      var userId = localStorage.getItem("userId");
      this.elementValue = v;
      Bus.$emit("val", this.elementValue);
      twomenu({
        userId: userId,
        appId: this.elementValue
      }).then(res => {
        this.twomenulist = res.records;
        this.$nextTick(() => {
          this.sanmenu(this.twomenulist[0].moduleId);
        });
        var sanji = this.twomenulist[0].moduleId;
      });
    },
    sanmenu(ve) {
      if (ve === undefined) {
        this.elementValueone = this.sanji;
      } else {
        this.elementValueone = ve;
      }
      //  ve ? ve : this.twomenulist[0].moduleId;
      this.elementValueone = ve;
      Bus.$emit("valone", this.elementValueone);
    },
    enter() {
      this.flag = true;
    },
    leave() {
      this.flag = false;
    },
    enterone() {
      this.flag1 = true;
    },
    leaveone() {
      this.flag1 = false;
    },
    clickquit() {
      this.flag1 = false;
    },
    yijiselect() {
      this.flag = false;
    },
    quit(v) {
      if (v === "退出") {
        this.$router.push("login");
        sessionStorage.removeItem("loginstatus");
      
      } else if (v === "基本资料") {
        this.$root.PAGE_TITLE = v;
        this.$router.push({
          name: "adminSet",
          params: {
            flag4: false
          }
        });
      } else if (v === "修改密码") {
        this.$root.PAGE_TITLE = v;
        this.$router.push({
          name: "changepassword",
          params: {
            // flag3: false
          }
        });
      }
    },

    operation() {
      const curFilesPath = process.env.NODE_ENV == 'production'
            ? '../../ui/static/files/'
            : '../../static/files/'
      const logininfo = this.userInfo ? this.userInfo : null;
      if(logininfo.userType == 2) {
        window.open(`${curFilesPath}大区操作手册.zip`);
        this.$message.success('操作手册下载成功');
      } else if (['4', '5', '6'].includes(logininfo.userType)) {
        window.open(`${curFilesPath}商家操作手册.zip`);
        this.$message.success('操作手册下载成功');
      } else {
        return
      }
    }
  }
};
</script>

<style lang="less" scoped>
.el-menu {
    background-color: rgb(50, 64, 87);
}
.headtop {
    //width: 1366px;
    width: 100%;
    z-index: 999;
    height: 45px;
    font-size: 16px;
    background: #797979;
    color: #fff;
    //   background-image: linear-gradient(94deg, #9b090c 0%, #de1717 100%);
    .sifang {
        display: inline-block;
        z-index: 999;
        /* display: inline-flex; */
        position: absolute;
        right: 215px;
        top: 6px;
        /* float: left; */
        .yijiselect {
            position: absolute;
            border: 1px solid #d2d2d2;
            width: 150px;
            color: #000;
            text-align: center;
            color: #666;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
            background: #fff;
            top: 54px;
            span {
                display: block;
                height: 40px;
                line-height: 40px;
            }
        }
        .arrow {
            content: "";
            width: 0;
            height: 0;
            border-style: solid dashed dashed;
            border-color: #fff transparent transparent;
            overflow: hidden;
            cursor: pointer;
            transition: all 0.2s;
            -webkit-transition: all 0.2s;
            position: absolute;
            top: 59%;
            right: -17px;
            margin-top: -3px;
            border-width: 6px;
            border-top-color: rgba(255, 255, 255, 0.7);
        }
        img {
            width: 30px;
            height: 30px;
        }
    }
    img {
        // max-width: 160px;
        // max-height: 41px;
        // margin-top: 10px;
        // margin-left: 25px;
        max-width: 140px;
        max-height: 80px;
        margin-top: 3px;
    }
    .name {
        display: inline-block;
        margin-top: 5px;
        font-size: 15px;
        margin-right: 30px;
    }
    .erclass {
        text-align: center;
        border-bottom: 1px #fff solid;
        display: inline-block;
        height: 39px;
        position: relative;
        opacity: 0.8 !important;
    }
    .erclass:after {
        border: 8px solid transparent;
        border-bottom: 8px solid #fff;
        position: absolute;
        bottom: 0;
        left: 40%;
        width: 0;
        height: 0;
        position: absolute;
        content: " ";
    }
    .erjimenu {
        display: inline-block;
        z-index: 999;
        /* display: inline-flex; */
        position: absolute;
        left: 300px;
        top: 20px;
        /* float: left; */
        span {
            margin: 0 20px;
            opacity: 1;
        }
    }
}
.sifangone {
    display: inline-block;
    z-index: 999;
    /* display: inline-flex; */
    position: absolute;
    right: 30px;
    top: 10px;
    .arrowone {
        content: "";
        width: 0;
        height: 0;
        border-style: solid dashed dashed;
        border-color: #fff transparent transparent;
        overflow: hidden;
        cursor: pointer;
        transition: all 0.2s;
        -webkit-transition: all 0.2s;
        position: absolute;
        top: 51%;
        right: 26%;
        // right: -17px;
        margin-top: 0px;
        border-width: 6px;
        border-top-color: #fff;
    }
    img {
        width: 15px;
        height: 15px;
    }
    .yijiselectone {
        position: absolute;
        border: 1px solid #d2d2d2;
        width: 80px;
        color: #000;
        text-align: center;
        color: #666;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
        background: #fff;
        top: 29px;
        right: -13px;
        span {
            display: block;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
        }
    }
}
.zuji {
    display: inline-block;
    z-index: 999;
    /* display: inline-flex; */
    position: absolute;
    right: 287px;
    top: 12px;
}
.myzuji {
    margin-top: 5px;
    display: inline-block;
    margin-left: 5px;
}
.bor {
    background-color: #797979;
    color: #fff;
    cursor: pointer;
}
.Login_logo {
    //   background-image: url(../assets/images/headtop/logobg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.logoName {
    position: absolute;
    // left: 11%;
    left: 140px;
    top: 24%;
    font-size: 15px;
    /* font-family: -webkit-pictograph; */
    font-family: "Hiragino Sans GB" !important;
}

.operation-wrapper {
  position: absolute;
  top: 8px;
  right: 220px;
  z-index: 16;
}
</style>
